$(function () {
    // 需求一：定义校验规则
    let form = layui.form;
    form.verify({
        nickname: [
            /^[\S]{1,10}$/,
            '用户昵称必须是1到10位的非空字符'
        ]
    });

    // 需求二：初始化用户信息，后续还要使用，所以封装成函数
    initUserInfo();
    function initUserInfo() {
        axios({
            method: 'GET',
            url: '/my/userinfo',
            // 身份认证由common.js完成，不需要再添加token
        }).then(function (res) {
            console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 利用layui中的方法给form表单赋值
            form.val('formUserInfo', res.data.data)
        });
    };

    // 需求三：重置表单
    // 给按钮设置点击事件或给表单绑定reset事件
    $('#btnReset').on('click', function (e) {
        e.preventDefault();
        initUserInfo();
    });

    // 需求四：提交表单
    $('form').on('submit', function (e) {
        e.preventDefault();
        axios({
            'method': 'POST',
            'url': '/my/userinfo',
            data: $(this).serialize() // 无法获取disabled属性的input标签值，而且请求参数不需要username
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            layer.msg('修改成功', { icon: 6 });
            // 重新渲染用户头像和文字头像，所以之前将index.html页面所属的getUserInfo方法设置为全局方法，user_info.html渲染在iframe标签，其父窗口是index.html，parent属性返回当前窗口的父窗口，将getUserInfo用于跨界面使用，直接调用是无效的，因为不属于同一个window
            
            // window.self是对当前窗口的引用，等价与window
            // window.top返回顶级窗口，即浏览器窗口，如果本身是等级窗口，则top是自身的引用
            // window.parent是父窗口，如果本身是顶层窗口，parent返回自身的引用
            window.parent.getUserInfo();
        });
    })
});